<template>
	<div>
		<div>
			<el-input type="textarea" :rows="10" placeholder="批量添加订货号（型号）和数量，用空格隔开，也可从Excel中复制粘贴，然后查询, 例如:RDMS100 10  MFJSI99 10 PSDHUENX 10"
			 v-model="fastText" style="width: 100%;">
			</el-input>
		</div>
		<div style="text-align:right;margin-top:10px;margin-bottom: 20px;">
			<el-button type="success" plain icon="el-icon-search">查 询</el-button>
		</div>
		<div>
			<el-table ref="multipleTable" :data="tableData3" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55">
				</el-table-column>
				<el-table-column label="序号" width="120">
					<template slot-scope="scope">{{ scope.row.date }}</template>
				</el-table-column>
				<el-table-column prop="name" label="商品详细" width="120">
				</el-table-column>
				<el-table-column prop="address" label="市场价">
				</el-table-column>
				<el-table-column prop="address" label="单价">
				</el-table-column>
				<el-table-column prop="address" label="渠道">
				</el-table-column>
				<el-table-column prop="address" label="购买数量">
				</el-table-column>
				<el-table-column prop="address" label="购买">
				</el-table-column>
			</el-table>
		</div>
		<div>
			<el-button @click="toggleSelection([tableData3])">全选</el-button>
			<el-button @click="toggleSelection()">取消选择</el-button>
			<span style="float: right;">
			<span >
				已选择的
			</span>
			<span style="color: red;font-size: 16px;font-weight: 400;">0</span>
			<span >
				种商品 共
			</span>
			<span style="color: red;font-size: 16px;font-weight: 400;">0</span>
			<span >
				件&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;总价(不含运费):
			</span>
			<span style="color: red;font-size: 16px;font-weight: 400;">￥0.00</span>
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<el-button type="success" plain >加入购物车</el-button>
			</span>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				fastText: '',
				tableData3: [{
					date: '2016-05-03',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				}, {
					date: '2016-05-02',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				}, {
					date: '2016-05-04',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				}, {
					date: '2016-05-01',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				}, {
					date: '2016-05-08',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				}, {
					date: '2016-05-06',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				}, {
					date: '2016-05-07',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				}],
				multipleSelection: []
			};
		},
		methods: {
			toggleSelection(rows) {
				if (rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			}
		}
	}
</script>

<style>

</style>
